import React from 'react';
import ReactDOM from 'react-dom';
class Clock extends React.Component {
  constructor(props){
    super(props);
    this.state = {date: new Date()}  
  }
  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
  componentDidMount(){
    this.timeId = setInterval(() => this.tick(),1000)
  }
  componentWillUnmount(){
    clearInterval(this.timeId)
  }
  tick(){
    this.setState({
      date: new Date()
    })
  }
}
function APP(){
  return (
    <div>
      <Clock />
      <Clock />
      <Clock />
    </div>
  );
}
ReactDOM.render(
  <APP />,
  document.getElementById('root')
)